<template>
  <div id="user">
    <div class="page-card">
      <div class="page-header">
        <div class="title">账户管理</div>
      </div>
      <div class="page-content">
        <div class="info-cell">
          <div class="left">
            <img class="img-icon" src="../../assets/image/userId.png" alt="">
            <span class="name">用户ID:</span>
            <span class="content">{{userInfo.phone}}</span>
          </div>
          <div class="right" @click="showPasswordDialog">
            修改密码
          </div>
        </div>
        <div class="info-cell">
          <div class="left">
            <img class="img-icon" src="../../assets/image/phone.png" alt="">
            <span class="name">手机号:</span>
            <span class="content">{{userInfo.phone}}</span>
          </div>
          <div class="right" @click="changePhone">
            换绑手机
          </div>
        </div>
        <div class="info-cell">
          <div class="left">
            <img class="img-icon" src="../../assets/image/qq_service_icon.png" alt="">
            <span class="name">QQ号:</span>
            <span class="content">&nbsp;{{userInfo.qq}}</span>
          </div>
          <div class="right" @click="showSocialDialog(1)">
            立即修改
          </div>
        </div>
        <div class="info-cell">
          <div class="left">
            <img class="img-icon" src="../../assets/image/wx_service_icon.png" alt="">
            <span class="name">微信号:</span>
            <span class="content">{{userInfo.we_chat}}</span>
          </div>
          <div class="right" @click="showSocialDialog(2)">
            立即修改
          </div>
        </div>
      </div>
    </div>
    <el-dialog :title="'修改'+ socialName" :visible.sync="isShowSocialDialog" width="350px" class="dialog-style">
      <el-form>
        <el-form-item :label="socialName+ ':'" prop="age">
          <el-input size="small" :placeholder="'请输入'+socialName+'号'" v-model="socialNum"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowSocialDialog=false" class="cancel-btn">取消</el-button>
        <el-button class="submit-btn" :disabled="submitLoading" :loading="submitLoading" @click="submitSocial">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="isShowPasswordDialog" width="400px" class="dialog-style">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm">
        <el-form-item label="旧密码:" prop="oldPassword">
          <el-input size="small" placeholder="请输入旧密码" v-model="passwordForm.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newPassword">
          <el-input size="small" placeholder="请输入新密码" v-model="passwordForm.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="repeatPassword">
          <el-input size="small" placeholder="请再次确认密码" v-model="passwordForm.repeatPassword"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowPasswordDialog=false" class="cancel-btn">取消</el-button>
        <el-button class="submit-btn" :disabled="submitLoading" :loading="submitLoading" @click="submitPassword">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="更换手机号" :visible.sync="isShowPhoneDialog" width="500px" class="dialog-style change-phone-dialog">
      <div>
        <el-steps class="steps" :active="stepNum" simple>
          <el-step title="验证旧手机号" icon="el-icon-ali-verification-code"></el-step>
          <el-step title="绑定新手机" icon="el-icon-edit"></el-step>
        </el-steps>
        <div v-if="stepNum == 1">
          <div class="phone-box">
            <span class="title">当前手机号：</span>
            <span class="old-phone">{{userInfo.phone}}</span>
          </div>
          <div class="phone-box">
            <span class="title">获取验证码：</span>
            <el-input size="small" class="code-input" placeholder="请输入验证码" v-model="oldPhoneCodeNum"></el-input>
            <el-button class="code-btn" @click="getOldPhoneCode">{{oldPhoneCodeName}}</el-button>
          </div>
        </div>
        <div v-else>
          <div class="phone-box">
            <span class="title">新手机号：</span>
            <el-input size="small" class="new-phone-input" placeholder="请输入新的手机号" v-model="newPhone"></el-input>
          </div>
          <div class="phone-box">
            <span class="title">获取验证码：</span>
            <el-input size="small" class="code-input" placeholder="请输入验证码" v-model="newPhoneCodeNum"></el-input>
            <el-button class="code-btn" @click="getNewPhoneCode">{{newPhoneCodeName}}</el-button>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" v-if="stepNum ==1">
        <el-button @click="nextStep" class="submit-btn">下一步</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-else>
        <el-button @click="isShowPhoneDialog=false" class="cancel-btn">取消</el-button>
        <el-button class="submit-btn" :disabled="submitLoading" :loading="submitLoading" @click="submitPhone">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    apiChangeQqWeChat,
    apiVerifyPhoneCode,
    apiChangePhone,
    apiChangePassword,
    apiSMSCode,
    apiMerchantShop
  } from '../../request/api'
  import { mapGetters,mapActions } from 'vuex';
  export default {
    data(){
      var checkOldPassword = (rule, value, callback) =>{
        if (value === '') {
            callback(new Error('请输入旧密码'));
        } else {
            callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入新密码'));
        } else {
        if (this.passwordForm.repeatPassword !== '') {
            this.$refs.passwordForm.validateField('checkPass');
        }
            callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
        callback(new Error('请再次输入密码'));
        } else if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
        } else {
        callback();
        }
      };
      return {
        socialName: 'QQ',
        socialNum: '',
        socialType: 1,
        isShowSocialDialog: false,
        userInfo: {},
        submitLoading: false,
        isShowPasswordDialog: false,
        passwordForm:{
          token: '',
          oldPassword: '',
          newPassword: '',
          repeatPassword: ''
        },
        passwordRules: {
          oldPassword: [
              { validator: checkOldPassword, trigger: 'blur' }
          ],
          newPassword: [
              { validator: validatePass, trigger: 'blur' }
          ],
          repeatPassword: [
              { validator: validatePass2, trigger: 'blur' }
          ],
        },
        isShowPhoneDialog: false,
        oldPhoneCodeName: '获取验证码',
        newPhoneCodeName: '获取验证码',
        newPhone: '',
        oldPhoneCodeNum: '',
        newPhoneCodeNum: '',
        stepNum: 1,
        timer:null,
        userToken: window.localStorage.getItem('token')
      }
    },
    created() {
      this.passwordForm.token = this.userToken
      this.getInitData()
    },
    methods:{
      getInitData(){
        this.$isClick(true);
        apiMerchantShop({
          token: this.userToken
        }).then(res =>{
          this.$isClick(false);
           if (res.code == 1){
             this.userInfo = res.msg.merchant_user_info;
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.$isClick(false);
            this.$message.error(res.msg)
        })
      },
      showSocialDialog(type){
        this.socialName = type == 1 ? 'QQ' : '微信'
        this.socialType = type
        this.socialNum = ''
        this.isShowSocialDialog = true
      },
      submitSocial(){
        if (this.socialType == 1) {
          if (this.socialNum == this.userInfo.qq) return this.$message.error("修改的qq号不能与旧qq号相同")
        } else {
          if (this.socialNum == this.userInfo.we_chat) return this.$message.error("修改的微信号不能与旧微信号相同")
        }
        this.submitLoading = true
        apiChangeQqWeChat({
          token: this.userToken,
          changeType: this.socialType,
          changeInfo: this.socialNum
        }).then(res =>{
           this.isShowSocialDialog = false
           this.submitLoading = false
           if (res.code == 1){
            this.$message.success(res.msg)
            this.getInitData()
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.isShowSocialDialog = false
          this.submitLoading = false
          this.$message.error(res.msg)
        })
      },
      showPasswordDialog(){
        this.passwordForm = {
          token: this.userToken,
          oldPassword: '',
          newPassword: '',
          repeatPassword: ''
        }
        this.isShowPasswordDialog = true
      },
      submitPassword(){
        this.$refs['passwordForm'].validate((valid) => {
          if (valid) {
            this.submitLoading = false
            apiChangePassword(this.passwordForm).then(res =>{
               this.isShowPasswordDialog = false
               this.submitLoading = false
               if (res.code == 1){
                this.$message.success('更换成功，请重新登录')
                setTimeout(()=>{
                  window.localStorage.clear();
                  this.$router.replace("/login");
                },5000)
               } else {
                 this.$message.error(res.msg);
               }
            }).catch(res => {
              this.isShowPasswordDialog = false
              this.submitLoading = false
              this.$message.error(res.msg)
            })
          }
        })
      },
      changePhone(){
        this.oldPhoneCodeName = '获取验证码'
        this.newPhoneCodeName = '获取验证码'
        this.newPhone = ''
        this.oldPhoneCodeNum = ''
        this.newPhoneCodeNum = ''
        this.isShowPhoneDialog = true
      },
      nextStep(){
        if (!this.oldPhoneCodeNum) {
          this.$message.error('请填写短信验证码!!')
          return
        }
        this.$isClick(true);
        apiVerifyPhoneCode({
          token: this.userToken,
          oldPhone: this.userInfo.phone,
          phoneCode: this.oldPhoneCodeNum
        }).then(res =>{
          this.$isClick(false);
           if (res.code == 1){
            this.stepNum = 2
            this.oldPhoneCodeName = '获取验证码'
            this.newPhoneCodeName = '获取验证码'
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg)
        })
      },
      getOldPhoneCode(){
        if(this.oldPhoneCodeName!=='获取验证码'){
        	return
        }
        apiSMSCode({
          codeType: 'verifyPhone',
          phone: this.userInfo.phone
        }).then(res =>{
           if (res.code == 1){
            this.oldPhoneCodeName = 60
            this.$message.success('获取成功')
            let timer=setInterval(()=>{
            	this.oldPhoneCodeName = this.oldPhoneCodeName -1
            	if(this.oldPhoneCodeName == 0){
            		this.oldPhoneCodeName = '获取验证码'
            		clearInterval(timer)
            	}
            },1000)
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.$message.error(res.msg)
        })
      },

      getNewPhoneCode(){
        if(this.newPhoneCodeName!=='获取验证码'){
        	return
        }
        apiSMSCode({
          codeType: 'changePhone',
          phone: this.newPhone
        }).then(res =>{
           if (res.code == 1){
            this.newPhoneCodeName = 60
            this.$message.success('获取成功')
            let timer=setInterval(()=>{
            	this.newPhoneCodeName = this.newPhoneCodeName -1
            	if(this.newPhoneCodeName == 0){
            		this.newPhoneCodeName = '获取验证码'
            		clearInterval(timer)
            	}
            },1000)
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.$message.error(res.msg)
        })
      },
      submitPhone(){
        if (!this.newPhone) {
          this.$message.error('请填写新手机号')
          return
        }
        if(!this.newPhoneCodeNum){
          this.$message.error('请填写短信验证码')
          return
        }
        if(this.userInfo.phone == this.newPhone){
          this.$message.error('绑定的手机号不能是旧手机号')
          return
        }
        this.submitLoading = true
        apiChangePhone({
          token: this.userToken,
          newPhone: this.newPhone,
          phoneCode: this.newPhoneCodeNum
        }).then(res =>{
           this.isShowPhoneDialog = false
           this.submitLoading = false
           if (res.code == 1){
             this.$message.success('更换成功，请重新登录')
             setTimeout(()=>{
               window.localStorage.clear();
               this.$router.replace("/login");
             },5000)
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.isShowPhoneDialog = false
          this.submitLoading = false
          this.$message.error(res.msg)
        })
      },
    }
  }
</script>

<style lang="less">
  #user{
    .page-card {
      background: #FFFFFF;
      margin-bottom: 16px;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
      padding-bottom: 16px;
      border-radius: 5px;
      .page-header {
        background: #ecf5ff;
        padding: 10px;
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        .title {
          line-height: 20px;
          border-left: 3px solid #666666;
          padding-left: 10px;
          font-size: 16px;
          font-weight: 700;
          color: #333333;
          width: 150px;
        }
      }
      .page-content {
        padding: 10px 20px ;
        .info-cell {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 350px;
          margin-bottom: 16px;
          .left {
            color: #333333;
            .img-icon {
              width: 20px;
              height: 20px;
              display: inline-block;
              vertical-align: middle;
              margin-right: 10px;
            }
            .content {
              margin-left: 16px;
            }
          }
          .right {
            border: 1px solid #e0e0e0;
            padding: 3px 15px;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            color: #666666;
          }
        }
      }
    }
    .change-phone-dialog {
      .steps {
        margin-bottom: 30px;
      }
      .phone-box {
        margin-bottom: 16px;
        .title {
          width: 100px;
          display: inline-block;
          text-align: right;
          margin-right: 5px;
        }
        .old-phone {
          color: @themeColor;
        }
        .code-input {
          border-radius: 5px;
          width: 150px;
          margin-right: 10px;
        }
        .code-btn {
          width: 100px;
          height: 35px;
          text-align: center;
          line-height: 35px;
          background: @themeColor;
          color: #FFFFFF;
          padding: 0;
        }
        .new-phone-input {
          width: 230px;
        }
      }
    }
  }
</style>
